<template>
  <div class="filter-btn" is-link @click="show = true">
    <i class="icon iconfont icon-gaojishanxuan"></i>
    <span>筛选</span>
  </div>

  <van-popup
    v-model:show="show"
    position="bottom"
    :style="{ height: '60%' }"
    round
    closeable
  >
    <div class="popup-inner">
      <div class="title">筛选</div>
      <slot></slot>
    </div>

    <div class="btn-group">
      <van-button
        :style="convertPxToRem('width: 165px')"
        @click="onReset"
        round
        plain
        >重置</van-button
      >
      <van-button
        :style="convertPxToRem('width: 165px')"
        round
        type="primary"
        @click="onSubmit"
        >确认创建</van-button
      >
    </div>
  </van-popup>
</template>

<script setup>
import { convertPxToRem } from "@/utils/index.js";
import { ref } from "vue";
const show = ref(false);

const emit = defineEmits(["reset", "submit"]);

const onReset = () => {
  emit("reset");
};

const onSubmit = () => {
  emit("submit");
  show.value = false;
};
</script>

<style lang="scss" scoped>
.filter-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  color: #767676;

  .icon {
    font-size: 18px;
    color: #424242;
  }
}

.popup-inner {
  width: 100%;
  height: 100%;

  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 18px;
  }
}

.btn-group {
  display: flex;
  height: 80px;
  justify-content: space-around;
}
</style>